<template>
  <div class="container">
    <div class="app-container">
      <div class="content">
        <div class="content-top">
          <span>
            <el-input
              v-model="UserList.username"
              placeholder="根据用户名搜索"
              style="width: 300px; margin-right: 10px"
            />
            <el-button @click="empty">清空</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </span>
          <span>
            <el-button type="success" icon="el-icon-edit" @click="addUser">
              新增用户
            </el-button>
          </span>
        </div>
        <div class="margin-bottom: 10px;">
          <el-alert
            :title="`共${total}条记录`"
            type="info"
            show-icon
            :closable="false"
          />
        </div>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            :header-row-style="{ 'background-color': '#000' }"
          >
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="" label="联系电话">
              <template v-slot="{ row }">
                {{ row.phone ? row.phone : '无' }}
              </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="permission_group_title" label="权限组管理" />
            <el-table-column prop="role" label="角色" />
            <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.id !== 2"
                  style="margin-right: 10px"
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  plain
                  @click="edit(scope.row.id)"
                />
                <el-popconfirm
                  title="确认删除该用户吗"
                  @onConfirm="deleteFn(scope.row.id)"
                >
                  <el-button
                    v-if="scope.row.id !== 2"
                    slot="reference"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    plain
                  />
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              background
              :page-sizes="[10, 5, 2, 1]"
              :page-size="UserList.pagesize"
              layout="->, prev,pager,next,sizes,jumper"
              :current-page="UserList.page"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="state ? '添加用户' : '编辑用户'"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <span>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" style="width: 300px" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" style="width: 300px" />
          </el-form-item>
          <el-form-item v-if="state" label="密码" prop="password">
            <el-input v-model="ruleForm.password" style="width: 300px" />
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="ruleForm.role" style="width: 300px" />
          </el-form-item>
          <el-form-item label="权限组名称">
            <el-select
              v-model="ruleForm.permission_group_id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in permissionsList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话" prop="account">
            <el-input v-model="ruleForm.phone" style="width: 300px" />
          </el-form-item>
          <el-form-item label="介绍" prop="account">
            <el-input
              v-model="ruleForm.introduction"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              style="width: 300px"
            />
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="state" type="primary" @click="areYouSure">
          确 定
        </el-button>
        <el-button v-else type="primary" @click="saveUser"> 保 存 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getUserListApi,
  PostUserApi,
  getpermissionsListApi,
  editUserApi,
  getUserdetailApi,
  deleteUserApi
} from '@/api/backstage'
export default {
  data() {
    return {
      state: true,
      // 用户列表
      tableData: [],
      dialogVisible: false,
      // 表单
      ruleForm: {
        // accont: '',
        username: '', // 用户名
        email: '', // 电子邮箱
        phone: '', // 联系电话
        permission_group_id: null,
        introduction: '', // 描述信息
        role: '', // 角色
        password: '123456' // 密码
      },
      // 校验
      rules: {
        accont: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        password: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      },
      permissionsList: [],
      // 总条数
      total: 0,
      // 请求用户列表
      UserList: {
        page: 1,
        pagesize: 10,
        username: ''
      }
    }
  },
  async created() {
    this.getUserList()
    const data = await getpermissionsListApi()
    console.log(data)
    this.permissionsList = data.data
  },
  methods: {
    async getUserList() {
      const { data } = await getUserListApi(this.UserList)
      this.total = data.counts
      // console.log(data)
      this.tableData = data.list
      // console.log(this.tableData)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.UserList.pagesize = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.UserList.page = val
      this.getUserList()
    },
    // 关闭
    handleClose(done) {
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        // accont: '',
        username: '', // 用户名
        email: '', // 电子邮箱
        phone: '', // 联系电话
        permission_group_id: null,
        introduction: '', // 描述信息
        role: '', // 角色
        password: '123456' // 密码
      }
      this.dialogVisible = false
    },
    // 搜索
    search() {
      this.getUserList()
    },
    // 清空
    empty() {
      this.UserList.username = ''
      this.getUserList()
    },
    // 点击页面添加用户
    addUser() {
      this.state = true
      this.dialogVisible = true
    },
    // 编辑用户
    async edit(id) {
      const { data } = await getUserdetailApi(id)
      this.ruleForm = data
      delete this.ruleForm.create_time
      delete this.ruleForm.last_update_time
      this.state = false
      this.dialogVisible = true
    },
    // 对话框取消
    cancel() {
      this.handleClose()
    },
    // 确认添加
    areYouSure() {
      this.$refs.ruleForm.validate(async (valid) => {
        console.log(valid)
        if (valid) {
          // 表单校验通过
          // 执行提交逻辑
          await PostUserApi(this.ruleForm)
          this.getUserList()
          this.handleClose()
          this.dialogVisible = false
        }
      })
    },
    // 确认保存
    saveUser() {
      this.$refs.ruleForm.validate(async (valid) => {
        console.log(valid)
        if (valid) {
          // 表单校验通过
          // 执行提交逻辑
          await editUserApi(this.ruleForm)
          this.getUserList()
          this.handleClose()
          this.dialogVisible = false
        }
      })
    },
    // 删除
    async deleteFn(id) {
      await deleteUserApi(id)
      this.getUserList()
      this.$message.success('成功删除')
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  padding: 20px;
  background-color: #fff;
  .content-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}
</style>
